<template>
    <div class="box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="线索分析" name="first">
                <div class="firstbox">
                    <el-row :gutter="40">
                        <el-col :span="6.5">
                            渠道来源
                            <el-select
                                v-model="searchParams.name"
                                placeholder="请选择渠道状态"
                                style="width: 229px; margin-left: 10px"
                                clearable
                            >
                                <el-option
                                    v-for="item in channelList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name"
                                />
                            </el-select>
                        </el-col>
                        <el-col :span="6.5">
                            线索状态<el-select
                                v-model="searchParams.type"
                                placeholder="请选择渠道类型"
                                style="width: 230px; margin-left: 10px"
                                clearable
                            >
                                <el-option
                                    v-for="item in clueList"
                                    :key="item.dictLabel"
                                    :label="item.dictLabel"
                                    :value="item.dictLabel"
                                />
                            </el-select>
                        </el-col>
                        <el-col :span="10">
                            <div class="block">
                                创建时间
                                <el-date-picker
                                    v-model="searchParams.createTime"
                                    style="width: 400px; margin-left: 6px"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-value="[new Date(2025, 5, 1), new Date(2025, 6, 1)]"
                                />
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px">
                        <el-button :icon="Search" type="primary">搜索</el-button>
                        <el-button :icon="Refresh">重置</el-button>
                    </el-row>
                    <div style="margin-top: 20px">
                        <e-charts class="chart" :option="clueoption" />
                    </div>
                    <el-table :data="tableDataclue" border style="width: 100%">
                        <el-table-column prop="date" label="时间" width="180" />
                        <el-table-column prop="name" label="线索增量" width="180" />
                        <el-table-column prop="address" label="线索存量" />
                    </el-table>
                </div>
            </el-tab-pane>

            <el-tab-pane label="商机分析" name="second">
                <el-row style="padding: 20px">
                    <el-col :span="10">
                        <div class="block">
                            创建时间
                            <el-date-picker
                                v-model="searchParams.createTime"
                                style="width: 400px; margin-left: 6px"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-value="[new Date(2025, 5, 1), new Date(2025, 6, 1)]"
                            />
                        </div>
                    </el-col>
                    <el-col :span="6" style="margin-left: -20px">
                        <el-button :icon="Search" type="primary">搜索</el-button>
                        <el-button :icon="Refresh" @click="resetBusinessSearch">重置</el-button>
                    </el-col>
                </el-row>
                <!-- ECharts 容器：使用 vue-echarts 组件 -->
                <h2 style="margin-top: 10px; text-align: center">商机分析</h2>
                <e-charts class="chart" :option="option" />
                <el-table :data="businessTableData" border style="width: 100%; padding: 0 20px">
                    <el-table-column prop="time" label="时间" width="180" />
                    <el-table-column prop="increment" label="商机增量" width="180" />
                    <el-table-column prop="stock" label="商机存量" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="活动分析" name="third">
                <div class="bigbox">
                    <el-row>
                        <el-col :span="10">
                            <div class="block">
                                创建时间
                                <el-date-picker
                                    v-model="searchParams.createTime"
                                    style="width: 400px; margin-left: 6px"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-value="[new Date(2025, 5, 1), new Date(2025, 6, 1)]"
                                />
                            </div>
                        </el-col>
                        <el-col :span="6" style="margin-left: -20px">
                            <el-button :icon="Search" type="primary">搜索</el-button>
                            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
                        </el-col>
                    </el-row>
                </div>
                <e-charts class="actchart" :option="actoptioncirle" />
                <e-charts class="chart" :option="zheoptioncirle" />
                <el-table :data="activeTableData" border style="width: 100%; padding: 0 20px">
                    <el-table-column prop="name" label="活动名称" width="180" />
                    <el-table-column prop="count" label="线索数量" width="180" />
                    <el-table-column prop="available" label="线索有效率" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="渠道分析" name="fourth">
                <div class="bigbox">
                    <el-row>
                        <el-col :span="10">
                            <div class="block">
                                创建时间
                                <el-date-picker
                                    v-model="searchParams.createTime"
                                    style="width: 400px; margin-left: 6px"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-value="[new Date(2025, 5, 1), new Date(2025, 6, 1)]"
                                />
                            </div>
                        </el-col>
                        <el-col :span="6" style="margin-left: -20px">
                            <el-button :icon="Search" type="primary">搜索</el-button>
                            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
                        </el-col>
                    </el-row>
                </div>
                <e-charts class="actchart" :option="qactoptioncirle" />
                <e-charts class="chart" :option="qzheoptioncirle" />
                <el-table :data="channelList" border style="width: 100%; padding: 0 20px">
                    <el-table-column prop="name" label="活动名称" width="180" />
                    <el-table-column prop="count" label="线索数量" width="180" />
                    <el-table-column prop="available" label="线索有效率" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { channel, clue, active } from '../../../api/analysis';
import type { TabsPaneContext } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
const searchParams: any = reactive({
    createTime: [],
    name: '',
    type: '',
});
// 商机分析
const businessTableData: any = [];
// 线索列表
const tableDataclue: any = [];
// 促销活动
const activeTableData: any = ref([]);
const pageParms = reactive({
    pageNum: 1,
    pageSize: 10,
});
const activeName = ref('first');
// 存储接口返回的渠道数据
const channelList: any = reactive([]);
// 存储接口返回的线索数据
const clueList = reactive<any[]>([]);
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
};
onMounted(() => {
    getList();
    getListclue();
    getactive();
});

// 重置
function resetSearch() {
    // 重置搜索参数
    searchParams.name = '';
    searchParams.type = '';
    searchParams.createTime = [];
    pageParms.pageNum = 1;
    getList();
    getListclue();
}
console.log(searchParams, '这是搜索数据');

// 获取促销活动
function getactive() {
    active(pageParms).then(res => {
        console.log(res, '获取的促销活动');
        const pieData = res.data.map(item => ({
            name: item.name,
            value: item.count,
        }));
        activeTableData.value = res.data;
        qactoptioncirle.value.series[0].data = pieData;
    });
}

// 获取线索
function getListclue() {
    clue().then(res => {
        console.log(res, '这是线索');
        clueList.push(...res.data);
    });
}

// 获取渠道
function getList() {
    channel(pageParms).then(res => {
        console.log(res, '获取的数据');
        channelList.push(...res.data);
        const qpieData = res.data.map(item => ({
            name: item.name,
            value: item.count,
        }));
        qactoptioncirle.value.series[0].data = qpieData;
    });
}

// 渠道总数扇形图
const qactoptioncirle = computed(() => ({
    title: {
        text: '渠道总数分析',
        left: 'center',
        textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: '渠道分析 <br>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '渠道分析',
            type: 'pie',
            radius: '50%',
            data: channelList.map(item => ({
                name: item.name,
                value: item.count,
                available: item.available,
            })),
            label: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c}',
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
    ],
}));

// 渠道有效折线图
const qzheoptioncirle = computed(() => {
    const xData = channelList.map(item => item.name);
    const yData = channelList.map(item => item.available);

    return {
        title: {
            text: '渠道有效率分析',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
            },
            formatter: function (params: any) {
                const item = params[0];
                return `${item.name}<br>渠道线索有效率：${item.value}`;
            },
        },
        xAxis: {
            type: 'category',
            data: xData,
        },
        yAxis: { type: 'value', max: 1 },
        series: [
            {
                name: '渠道线索有效率',
                type: 'line',
                data: yData,
                symbol: 'circle',
                lineStyle: { color: '#489efc' },
                label: { show: true, position: 'top' },
            },
        ],
        legend: {
            data: ['渠道线索有效率'],
            left: 'center',
            top: 'bottom',
        },
    };
});

// 活动总数扇形图
const actoptioncirle = computed(() => ({
    title: {
        text: '活动总数分析',
        // subtext: '活动数据统计',
        left: 'center',
        textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: '活动分析 <br>{b} : {c} ({d}%)', //鼠标放到扇形内显示的内容
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '活动分析',
            type: 'pie',
            radius: '50%',
            data: activeTableData.value.map(item => ({
                name: item.name,
                value: item.count,
                available: item.available, // 传递有效率到 tooltip
            })),
            label: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c}',
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
    ],
}));

// 活动有效折线图
const zheoptioncirle = computed(() => {
    const xData = activeTableData.value.map(item => item.name);
    const yData = activeTableData.value.map(item => item.available);

    return {
        title: {
            text: '活动有效率分析',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 'bold' },
        },
        //  tooltip 配置，实现鼠标悬浮提示
        tooltip: {
            trigger: 'axis', // 触发方式：坐标轴触发，鼠标移到折线、点或坐标轴上都会显示
            axisPointer: {
                type: 'line', // 指示器样式：垂直显示数据
            },
            // 自定义提示内容，显示活动名称、有效率
            formatter: function (params: any) {
                const item = params[0];
                return `${item.name}<br>活动线索有效率：${item.value}`;
            },
        },
        xAxis: {
            type: 'category',
            data: xData,
        },
        yAxis: { type: 'value', max: 1 },
        series: [
            {
                name: '活动线索有效率',
                type: 'line',
                data: yData,
                symbol: 'circle',
                lineStyle: { color: '#489efc' },
                label: { show: true, position: 'top' },
            },
        ],
        legend: {
            data: ['活动线索有效率'],
            left: 'center',
            top: 'bottom',
        },
    };
});

//value的字段对应Y轴，name字段对应X轴
const incrementData = ref([]);
const stockData = ref([]);
// 线索折线图
const clueoption = computed(() => {
    return {
        xAxis: {
            type: 'category',
        },
        yAxis: { type: 'value' },
        series: [
            {
                name: '增量数据', // 系列名称
                type: 'line', // 图表类型（折线、柱状等）
                data: incrementData.value,
                symbol: 'circle', // 标记点样式
                lineStyle: { color: '#fdbf00' }, // 折线颜色
            },
            {
                name: '存量数据',
                type: 'line',
                data: stockData.value,
                symbol: 'circle',
                lineStyle: { color: '#489efc' }, // 折线颜色
            },
        ],
        legend: {
            data: ['增量数据', '存量数据'], //与 series.name 对应
            left: 'center',
            top: 'bottom',
        },
    };
});
// 商机折线图
const option = computed(() => {
    return {
        xAxis: {
            type: 'category',
            // X 轴用时间（或其他类别），取任意一组数据的 X 字段
        },
        yAxis: { type: 'value' },
        series: [
            {
                name: '增量数据', // 系列名称
                type: 'line', // 图表类型（折线、柱状等）
                symbol: 'circle',
                lineStyle: { color: '#fdbf00' },
            },
            {
                name: '存量数据',
                type: 'line',
                symbol: 'circle',
                lineStyle: { color: '#489efc' },
            },
        ],
        legend: {
            data: ['增量数据', '存量数据'],
            left: 'center',
            top: 'bottom',
        },
    };
});
</script>

<style scoped>
.box {
    padding: 5px;
}

.bigbox {
    padding: 5px 20px;
}

.firstbox {
    padding: 15px 22px;
}

.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

/* 折线图样式 */
.chart {
    height: 350px;
    width: 1300px;
    margin: 20px 0;
}

/* 活动扇形图样式 */
.actchart {
    height: 400px;
    width: 1275px;
    margin: 15px 0;
    /* background-color: pink; */
}
</style>
